<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title></title>
        <script type='text/javascript'>

            var CTP_WEB_FULLPATH ='../../';

        </script>
        <link href='../../css/jquery/ui.core.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/jquery/ui.theme.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/skins/standard/ctp-common.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/validator.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/borderlayout.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/panel.css' rel='stylesheet' type='text/css'/>
        <script type='text/javascript' src='../../js/jquery/jquery.js'></script>
        <script type='text/javascript' src='../../js/jquery/jquery-migrate.js'></script>
        <script type='text/javascript' src='../../js/jqueryui/jquery-ui.js'></script>
        <script type='text/javascript' src='../../js/ctp/public/jsextend.js'></script>
        <script type='text/javascript' src='../../js/ctp/public/ctp.core.js'></script>
        <script type='text/javascript' src='../../js/ctp/public/ctp.base.js'></script>
        <script type='text/javascript' src='../../js/ctp/public/ctp.ui.component.js'></script>
        <script type='text/javascript' src='../../js/ctp/panel/ctp.ui.panel.js'></script>
        <script type='text/javascript' src='../../js/ctp/validator/ctp.validator-rules.js'></script>
        <script type='text/javascript' src='../../js/ctp/validator/ctp.validator.js'></script>
        <script type='text/javascript' src='../../js/ctp/borderlayout/ctp.ui.borderlayout.js'></script>
        <script type='text/javascript' src='../../js/ctp/borderlayout/jquery.layout.js'></script>
        <script type='text/javascript' src='../../js/ctp/chart/ctp.ui.chart.js'></script>
        <script type='text/javascript' kind='variant'>

            var chart1,chart2;
            
        </script>
        <script type='text/javascript' kind='event'>

        </script>
    <body>
        <table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
            <tr>
                <td valign="top" class="text">
                    <div id="container">
                    </div>
                    <div id="chartdiv" style="height:100%;">
                    </div>
                     <div id="chartdiv2" style="height:100%;">
                    </div>
                    <div>
                        <a href="javascript:fun();">更新数据</a>
                    </div>
                    <div>
                        <a href="javascript:fun1();" id ="updata">实时更新</a>
                    </div>
                    <div>
                        <h1 id ="loading" style='display:none'>数据更新中。。。</h1>
                    </div>
                    <script type="text/javascript">
                        //var CTP_WEB_FULLPATH="../../";
                        var chart = '';
                        //多柱图和曲线图数据格式                    
                        var _jsonMS = {
                            "categories": {
                                "category": [{
                                    "name": "中国"
                                }, {
                                    "name": "美国"
                                }, {
                                    "name": "日本"
                                }, {
                                    "name": "德国"
                                }]
                            },
                            "dataset": [{
                                "seriesname": "经济",
                                "color": "B1D1DC",
                                "set": [{
                                    "value": "88"
                                }, {
                                    "value": "90"
                                }, {
                                    "value": "90"
                                }, {
                                    "value": "99"
                                }]
                            }, {
                                "seriesname": "政治",
                                "color": "C8A1D1",
                                "set": [{
                                    "value": "85"
                                }, {
                                    "value": "38"
                                }, {
                                    "value": "85"
                                }, {
                                    "value": "15"
                                }]
                            }, {
                                "seriesname": "军事",
                                "color": "B0DE09",
                                "set": [{
                                    "value": "80"
                                }, {
                                    "value": "60"
                                }, {
                                    "value": "90"
                                }, {
                                    "value": "25"
                                }]
                            }]
                        
                        };
                        
                        //单柱图和圆饼图数据格式
                        var _json = {
                            "set": [{
                                "name": "USA",
                                "value": "45",
                                "color": "AFD8F8"
                            }, {
                                "name": "法国",
                                "value": "90",
                                "color": "F6BD0F"
                            }, {
                                "name": "印度",
                                "value": "26",
                                "color": "8BBA00"
                            }, {
                                "name": "英国",
                                "value": "35",
                                "color": "FF8E46"
                            }, {
                                "name": "意大利",
                                "value": "59",
                                "color": "8E468E"
                            }, {
                                "name": "加拿大",
                                "value": "12",
                                "color": "008ED6"
                            }, {
                                "name": "德国",
                                "value": "33",
                                "color": ""
                            }]
                        };
                        $(document).ready(function(){
                            
                            chart = new ctp.ui.chart({
                                swfType: 'Column2D',//Column2D,Column3D,Pie2D,Pie3D,MSColumn2D,MSColumn3D,MsLine,MsArea,StckdArea,StckdColumn2D,StckdColumn3D
                                swfPath: '../../images/chart/',
                                id: 'ChartId',
                                width: '100%',
                                height: '95%',
                                /* bgColor: 'E4EBF6',*/
                                jsonData: _json,//_json,_jsonMS							
                                // renderTo: 'body',
                                 chartWidth: '850',
                                 chartHeight: '400',
                                 //canvasBgColor: 'FFFFFF',
                                 //xAxisName: '国家',
                                 yAxisName: '数值',
                                 /*caption: '国家实力统计',
                                 yAxisMaxValue: '120',
                                 decimalPrecision: '0',
                                 formatNumberScale: '0',
                                 thousandSeparator: ',',
                                 numberPrefix: '',
                                 numberSuffix: '',
                                 numDivLines: '9',
                                 showValues: '1',*/
                                animation: '1'//,
                                //renderTo: 'chartdiv'
                            });
                            chart2 = new ctp.ui.chart({
                                swfType: 'StckdArea',//Column2D,Column3D,Pie2D,Pie3D,MSColumn2D,MSColumn3D,MsLine,MsArea,StckdArea,StckdColumn2D,StckdColumn3D
                                swfPath: '../../images/chart/',
                                id: 'ChartId2',
                                width: '100%',
                                height: '95%',
                                /* bgColor: 'E4EBF6',*/
                                jsonData: _jsonMS,//_json,_jsonMS							
                                // renderTo: 'body',
                                 chartWidth: '850',
                                 chartHeight: '400',
                                 //canvasBgColor: 'FFFFFF',
                                 //xAxisName: '国家',
                                 yAxisName: '数值',
                                 /*caption: '国家实力统计',
                                 yAxisMaxValue: '120',
                                 decimalPrecision: '0',
                                 formatNumberScale: '0',
                                 thousandSeparator: ',',
                                 numberPrefix: '',
                                 numberSuffix: '',
                                 numDivLines: '9',
                                 showValues: '1',*/
                                animation: '1'
                            });                            
                             //chart2.renderTo ('chartdiv2');
                             //alert(chart.getJqDom()) ;

                            new ctp.ui.panel({
                                id:'panel1',
                                title: 'ctp chart1',
                                collapsible: true,
                                width: '850px',
                                height: '500px',
                                items:[chart],
                                renderTo: 'container'//,
                                
                                //html: 'chartdiv'
                            });
                     new ctp.ui.panel({
                    	 		id:'panel2',
                                title: 'ctp chart2',
                                collapsible: true,
                                width: '850px',
                                height: '500px',
                                items:[chart2],
                                renderTo: 'container'//,
                                //html: 'chartdiv2'
                            });
                        });
                        
                        function fun(){
                            changeData();
                        }
                        
                        
                        function fun1(){
                        
                            $('#updata').attr({
                                style: 'display:none'
                            });
                            $('#loading').attr({
                                style: 'display:'
                            });
                            setTimeout(changeData, 3000);
                            setTimeout(fun1, 3000);
                            
                        }
                        
                        function changeData(){
                            var new_json = {
                                "set": [{
                                    "name": "美国",
                                    "value": Math.round(Math.random() * 100),
                                    "color": "AFD8F8"
                                }, {
                                    "name": "法国",
                                    "value": Math.round(Math.random() * 100),
                                    "color": "F6BD0F"
                                }, {
                                    "name": "印度",
                                    "value": Math.round(Math.random() * 100),
                                    "color": "8BBA00"
                                }, {
                                    "name": "英国",
                                    "value": Math.round(Math.random() * 100),
                                    "color": "FF8E46"
                                }, {
                                    "name": "意大利",
                                    "value": Math.round(Math.random() * 100),
                                    "color": "8E468E"
                                }, {
                                    "name": "加拿大",
                                    "value": Math.round(Math.random() * 100),
                                    "color": "008ED6"
                                }, {
                                    "name": "德国",
                                    "value": Math.round(Math.random() * 100),
                                    "color": ""
                                }]
                            };
                            
                            var new_jsonMS = {
                                "categories": {
                                    "category": [{
                                        "name": "中国"
                                    }, {
                                        "name": "美国"
                                    }, {
                                        "name": "日本"
                                    }, {
                                        "name": "德国"
                                    }]
                                },
                                "dataset": [{
                                    "seriesname": "经济",
                                    "color": "B1D1DC",
                                    "set": [{
                                        "value": Math.round(Math.random() * 100)
                                    }, {
                                        "value": Math.round(Math.random() * 100)
                                    }, {
                                        "value": Math.round(Math.random() * 100)
                                    }, {
                                        "value": Math.round(Math.random() * 100)
                                    }]
                                }, {
                                    "seriesname": "政治",
                                    "color": "C8A1D1",
                                    "set": [{
                                        "value": Math.round(Math.random() * 100)
                                    }, {
                                        "value": Math.round(Math.random() * 100)
                                    }, {
                                        "value": Math.round(Math.random() * 100)
                                    }, {
                                        "value": Math.round(Math.random() * 100)
                                    }]
                                }, {
                                    "seriesname": "军事",
                                    "color": "B0DE09",
                                    "set": [{
                                        "value": Math.round(Math.random() * 100)
                                    }, {
                                        "value": Math.round(Math.random() * 100)
                                    }, {
                                        "value": Math.round(Math.random() * 100)
                                    }, {
                                        "value": Math.round(Math.random() * 100)
                                    }]
                                }]
                            
                            };
                            
                            chart.updateChartXML('ChartId', new_json);
                        
                        
                        }
                    </script>
                </td>
            </tr>
        </table>
    </body>
</html>
